<template>
	<z-paging :refresher-enabled="false" :show-loading-more-when-reload="true" loading-more-default-text=""
		loading-more-loading-text="" loading-more-fail-text="" :empty-view-text="t('common.noData')"
		:show-loading-more-no-more-view="false" ref="paging" v-model="dataList" @query="queryList"
		class="max-w-[750px]">
		<h-dark :title="t('draw.titleRecord')"></h-dark>
		<view class="mx-[30rpx] mt-[20rpx]">
			<view v-for="item in dataList" :key="item.id"
				class="bg-[#2C326B] mb-[20rpx] rounded-lg px-[40rpx] py-[35rpx]">
				<view class="flex justify-between items-center">
					<view class="">
						<view class="">
							<view class="">
								{{item.title}}
							</view>
						</view>
						<view class="flex justify-between mt-[16rpx]">
							<view class="">{{item.create_time}}</view>
						</view>
					</view>
					<view class="text-right">
						<view class="pt-[30rpx] pl-[60rpx] flex justify-start items-center">
							<u-icon size="42" name="/static/images/mall/point.png"></u-icon>
							<view class="ml-[10rpx] text-error font-bold">
								- {{item.price}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</z-paging>
</template>

<script lang="ts" setup>
	import { ref, shallowRef } from 'vue'
	import { drawLists } from '@/api/mall'
	import { t } from '@/utils/util'
	uni.setNavigationBarTitle({ title: t('draw.titleRecord') })
	const paging = shallowRef()
	const dataList = ref<any[]>([])

	const queryList = async (pageNo : number, pageSize : number) => {
		try {
			const data = await drawLists({
				type: 2,
				page_no: pageNo,
				page_size: pageSize
			})
			paging.value.complete(data.lists)
		} catch (error) {
			paging.value.complete(false)
		}
	}
</script>

<style lang="scss" scoped>
</style>